<template>
	<div class="order">
		<div class="box2">
				<template>
				  <el-table
				    :data="orderall"
				    border
				    style="width: 100%;margin: 0 auto;">
				    <el-table-column label="图片" >
				     <template slot-scope="scope">
				    		<el-image
				    		      style="width: 80px; height: 100px"
				    		      :src="`${$ip}/api/public/showimg/${scope.row.book.pic}`">
				    		</el-image>
				      </template>
				    </el-table-column>
				   <el-table-column
				     prop="book.name"
				     label="商品描述"
				     >
				   </el-table-column>
				   <el-table-column
				     prop="price"
				     label="商品价钱"
				     >
				   </el-table-column>
				   <el-table-column
				     prop="num"
				     label="数量"
				    >
				   </el-table-column>
				   <el-table-column
				     prop="sum"
				     label="总金额"
				     >
				   </el-table-column>
				  </el-table>
				</template>
				<div class="box3">
					<header>请确认信息</header>
					<el-form ref="form" :model="usr" label-width="80px"  :rules="rules"   class="demo-ruleForm">
					  <el-form-item label="姓名" prop="name">
					    <el-input v-model="usr.name"></el-input>
					  </el-form-item>
					 <el-form-item label="电话号码" prop="phone">
					   <el-input v-model="usr.phone"></el-input>
					 </el-form-item>
					 <el-form-item label="地址" prop="addr">
					   <el-input v-model="usr.addr"></el-input>
					 </el-form-item>
					</el-form>
				</div>
				<div class="box1">
					<span class="sp" v-show="orid != null">订单下单成功, 单号: {{orid}}</span>
					<aside class="as2">
						<span>总价：￥{{sumPrice}}</span>
						<button @click="addOrder()" v-show="orid == null">去下单</button>
						<button @click="pay()" v-show="orid != null">去付款</button>
					</aside>
		</div>
	</div>
</div>	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	export default{
		name:'PcOrder',
		data() {
			var check = (rule, value, callback) => {
			        if (!value) {
			          return callback(new Error('不能为空'));
			        }
			      };
				  var checkPhone = (rule, value, callback) => {
				          if (!value) {
				            return callback(new Error('手机号不能为空'));
				          }
						  // var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
						  if (value.trim().length<11) {
						    return callback(new Error('手机号格式不正确'));
						  }
				        };
			return{
				orid:null,
				orderall:[],
				usr:{},
				ord:{ordid:0,amount:0,ship2addr:'',ship2name:'',ship2phone:'',carts:[]},
				 rules: {
				          name: [
				             { validator: check, trigger: 'blur' }
				          ],
						  phone: [
						    { validator: checkPhone, trigger: 'blur' }
						  ],
						  addr: [
						     { validator: check, trigger: 'blur' }
						  ],
				         
				       }
			}
		},
		methods:{
			...mapActions('order',['delHistory']),
			addOrder(){
				this.ord.ship2name = this.usr.name;
				this.ord.ship2phone = this.usr.phone;
				this.ord.ship2addr = this.usr.addr;
				this.ord.carts = this.orderall;
				this.$postj('/api/fore/cart/add2Order',this.ord).then((resp)=>{
					console.log(resp.data.data);
					if(resp.data.data.ordid){
						this.orid = resp.data.data.ordid;
						this.$message({
							message:'下单成功',
							type:'success'
						})
						this.delHistory();
					}else{
						this.$message({
							message:'下单失败',
							type:'error'
						})
					}
				})
				
			},
			pay(){
				this.$router.push({
					path:'/pc/pay',
					query:{id:this.orid}
				})
			}
		},
		computed:{
			...mapState('order',['orders']),
			sumPrice(){
				let sumPrice = 0;
				this.orderall.forEach((item)=>{
					sumPrice += item.sum;
				})
				return sumPrice;
			}
		},
		mounted() {
			this.orderall = this.orders;
			this.$get('/api/user/shipInfo').then((resp)=>{
				console.log(resp.data.data);
				this.usr =resp.data.data; 
			})
		},
	}
</script>

<style scoped>
	.order{
		width: 80%;
		margin: 50px auto;
	}
	.box2{
		width: 100%;
		border: 2px solid gainsboro;
	}
	.box1{
		width: 100%;
		height: 50px;
		display: flex;
		line-height: 50px;
		justify-content: space-between;
	}
	.box1 .sp{
		display: flex;
		margin: 0 auto;
		position: relative;
	}
	.box1 span{
		font-weight: 900;
		color: red;
	}
	.box3{
		width: 100%;
		margin: 0 auto;
	}
	.box3 header{
		height: 40px;
		background-color: gray;
		line-height: 40px;
		font-weight: 900;
	}
	.as2{
		width: 300px;
		height: 100%;
		position: absolute;
		right: 10%;
	}
	.as2 button{
		margin-left: 50px;
		width: 150px;
		border: none;
		height: 40px;
		background-color: #f56c6c;
		border-radius: 5px;
		color: white;
	}
	.el-form{
		width: 50%;
		margin: 10px auto;
	}
</style>